<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>WebConsole</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="Keywords" content="ApiBox.Club">
    <meta name="Description" content="ApiBox.Club">
    <meta name="copyright" content="2015 ApiBox.Club">
    <meta name="author" content="Eric Shi/QQ:155122504">
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <!--[if lt IE 9]>
    <script src="/static/scripts/libs/html5/json/json2.min.js" type="text/javascript"></script>
    <script src="/static/scripts/libs/html5/html5shiv/html5shiv.min.js" type="text/javascript"></script>
    <script src="/static/scripts/libs/html5/respond/respond.min.js" type="text/javascript"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="/static/scripts/libs/metro-ui/css/metro.min.css">
    <link type="text/css" rel="stylesheet" href="/static/scripts/libs/metro-ui/css/metro-icons.min.css">
    <link type="text/css" rel="stylesheet" href="/static/scripts/libs/metro-ui/css/metro-responsive.min.css">
    <style type="text/css">
        .login-form {
            width: 25rem;
            height: 18.75rem;
            position: fixed;
            top: 50%;
            margin-top: -9.375rem;
            left: 50%;
            margin-left: -12.5rem;
            background-color: #ffffff;
        }
    </style>
</head>

<body class="bg-darkTeal">
    <div class="login-form padding20 block-shadow">
        <form id="console_form" method="post" action="/console/login">
            <h4 class="text-light header">Web Console</h4>
            <input type="hidden" name="vm_addr" id="dst_vmaddr">
            <div class="input-control text modern full-size" data-role="input">
                <span class="mif-earth prepend-icon"></span>
                <input type="text" id="src_vmaddr" placeholder='请输入主机地址(需携带端口号,如:"xxx:22")'>
                <button class="button helper-button clear"><span class="mif-cross"></span></button>
            </div>
            <br />
            <div class="input-control text full-size" data-role="input">
                <span class="mif-user prepend-icon"></span>
                <input type="text" name="user_name" id="user_name" placeholder="请输入用户名">
                <button class="button helper-button clear"><span class="mif-cross"></span></button>
            </div>
            <br />
            <br />
            <div class="input-control password full-size" data-role="input">
                <span class="mif-lock prepend-icon"></span>
                <input type="password" name="user_pwd" id="user_pwd" placeholder="请输入密码">
                <button class="button helper-button reveal"><span class="mif-looks"></span></button>
            </div>
            <br />
            <br />
            <div class="form-actions">
                <span id="login-box-msg" class="tag alert"></span>
                <button type="submit" class="button primary place-right">登&nbsp;&nbsp;陆</button>
            </div>
        </form>
    </div>
</body>
<script src="/static/scripts/libs/bowser/bowser.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var bowserVerErrMsg = "WebClonsole 工具使用了 HTML5 的核心相关技术，为了更好的体验该工具，请升级您的浏览器到IE9、Chrome 40、Firefox 38、Safari 9或更高版本。";

    var bowserVer = Number(bowser.version);

    var bowserVerFunc = function() {
        var bowserBody = document.getElementsByTagName("body")[0];
        bowserBody.innerHTML = "";

        var errDiv = document.createElement("div");
        errDiv.innerHTML = bowserVerErrMsg;
        errDiv.style.display = "inline-block";
        errDiv.style.position = "absolute";
        errDiv.style.zIndex = "1500";
        errDiv.style.top = "40%";
        errDiv.style.width = "100%";
        errDiv.style.textAlign = "center";
        errDiv.style.color = "#FFFFFF";

        bowserBody.appendChild(errDiv);
    };


    if (bowser.msie && bowserVer < 9) {
        bowserVerFunc();
        alert(bowserVerErrMsg);
    }

    if (bowser.firefox && bowserVer < 38) {
        bowserVerFunc();
        alert(bowserVerErrMsg);
    }

    if (bowser.chrome && bowserVer < 40) {
        bowserVerFunc();
        alert(bowserVerErrMsg);
    }

    if (bowser.safari && bowserVer < 9) {
        bowserVerFunc();
        alert(bowserVerErrMsg);
    }
</script>
<script src="/static/scripts/libs/base64/base64.min.js" type="text/javascript"></script>
<script src="/static/scripts/libs/url-js/url.min.js" type="text/javascript"></script>
<script src="/static/scripts/libs/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="/static/scripts/libs/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="/static/scripts/libs/jquery-form/jquery.form.min.js" type="text/javascript"></script>
<script src="/static/scripts/libs/metro-ui/js/metro.min.js" type="text/javascript"></script>
<script src="/static/scripts/console.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("#login-box-msg").hide();
        $("#console_form").ConsoleLogin({
            "loginBoxMsg": "#login-box-msg",
            "username": "#user_name",
            "userpwd": "#user_pwd",
            "standalone": true,
            "src_vmaddr": "#src_vmaddr",
            "dst_vmaddr": "#dst_vmaddr"
        });
    });
</script>

</html>